<template>
  <view :class="$style.container">
    <map id="mapId" class="map" style="width: 100%; height: 90%" show-location="true" show-compass="true"
      :latitude="latitude" :longitude="longitude" :markers="markers" :circles="viewAlertDetailFlag && circles || []"
      :polyline="viewAlertDetailFlag && polyline || []"></map>

    <alarm-info :ajxxId="jqId" :fixBottom="fixBottom"></alarm-info>

    <view :class="$style.button_group" class="flex" v-if="viewAlertDetailFlag">
      <button :class="$style.button" @click="returnBackTo">返回</button>
      <button :class="$style.button_detail" @click="viewAlarmDetail">查看详情</button>
    </view>

    <!-- 警情收藏功能 -- ui上展示在详情页面；设计上需要把该功能加载概览页面 -->
    <view :class="$style.favorite" class="flex flex-row justify-center items-center absolute"
      @click="handleFavoriteClick" :style="{ bottom: favorBottom }">
      <!-- 未收藏 -->
      <image :src="favoriteImg" mode="widthFix" style="width:32rpx; height: 32rpx;" v-show="!isFavorite"></image>
      <!-- 已收藏 -->
      <image :src="isFavoriteImg" mode="widthFix" style="width:32rpx; height: 32rpx;" v-show="isFavorite"></image>
      <view :class="$style.text">收藏</view>
    </view>

    <!-- 地图交互模块 -->
    <map-interaction v-if="!viewAlertDetailFlag && false"></map-interaction>

    <!-- 收藏成功提示 -->
    <view :class="$style.punch_notice" class="absolute flex-col-center" v-if="punchCompleteFlag">
      <text>收藏成功</text>
    </view>

    <!-- 媒体功能模块 -->
    <van-sticky :offset-top="scrollTop" z-index="90">
      <media-function v-if="!viewAlertDetailFlag" :jqId="jqId" :isFeedbackShow="false"></media-function>
    </van-sticky>

    <!-- 警情详情 -->
    <alarm-detail v-if="!viewAlertDetailFlag" :jqId="jqId"></alarm-detail>
  </view>
</template>

<script setup lang="ts">
/***
 * 警情概览页面 -- 平时查看警情页面
 */
import AlarmInfo from "@/components/alarm-info/index.vue";
import MediaFunction from "@/components/media-function/index.vue";
import MapInteraction from "@/components/map-interaction/index.vue";
import AlarmDetail from "./alarm-detail/index.vue";

import favoriteImg from "@/static/images/common/favorite.png";
import isFavoriteImg from "@/static/images/common/isFavorite.png";
import {
  insertCollectAlert, queryWhetherCollectAlert, queryAlertInfo, queryGroupList,
  queryClGps, queryRyGps, queryQsmt, queryRgsy,
  queryTrsy, queryXhs, queryJcXfjgFwInfo,
} from '@/api';
import { onMounted, ref } from "vue";
import { getLocal } from '@/utils'
import { onLoad } from "@dcloudio/uni-app";

const jqId = ref<string>(""); // 测试值 f27004486ab84626a4458bd58726cda1
const openid: any = getLocal('openid')
const latitude = ref<number>(32.058518);
const longitude = ref<number>(118.782742);
const scrollTop = ref<number>();
const viewAlertDetailFlag = ref<boolean>(true)
// 警情概览模块和 收藏模块绝对定位位置*/
const fixBottom = ref<string>('0rpx')
const favorBottom = ref<string>('0rpx')

/** 加载页面时 获取传入的警情id */
onLoad((options: any) => {
  const windowHeight = uni.getSystemInfoSync().windowHeight
  scrollTop.value = windowHeight * 0.9

  // 警情概览模块和 收藏模块绝对定位位置*/
  const bottomHeight = Math.floor(windowHeight * 0.1)
  favorBottom.value = bottomHeight + 5 + 'px'
  fixBottom.value = bottomHeight + 10 + 38 + 'px'

  /** 接收页面 jqId 等其他参数 */
  jqId.value = options.jqId
  options?.latitude ? latitude.value = parseFloat(options?.latitude) : 31
  options?.longitude ? longitude.value = parseFloat(options?.longitude) : 118
  options?.alertCard === 'true' ? viewAlertDetailFlag.value = false : viewAlertDetailFlag.value = true
})

/** 页面挂载时 获取数据 */
onMounted(() => {
  // 获取是否收藏数据
  collectAlert(jqId.value)
  getList()
})

const circles = ref<any>()
const polyline = ref<any>()

function getList() {
  queryAlertInfo({ ajxxId: jqId.value })
    .then((res: any) => {
      console.log('chancel', 'index', '158行', res);
      // 地图焦点
      latitude.value = res.data.wd
      longitude.value = res.data.jd
      // 终点
      markers.value[0].latitude = res.data.wd
      markers.value[0].longitude = res.data.jd
      // console.log('chancel', 'index', '164行', markers.value[0].callout.content);
      // markers.value[0].callout.content = res.data.afdz
      // 设置圈
      circles.value = [{
        latitude: res.data.wd,
        longitude: res.data.jd,
        color: "#3E60DC",
        radius: 200,
        strokeWidth: 2,
        fillColor: "#637ee136"
      }]

      // 设置路径
      polyline.value = [
        {
          points: [
            {
              latitude: res.data.wd,
              longitude: res.data.jd,
            },
            {
              latitude: res.data.wd + 0.0004,
              longitude: res.data.jd + 0.0004,
            },
            {
              latitude: res.data.wd + 0.001,
              longitude: res.data.jd + 0.002,
            }
          ],
          color: "#66b3fe",
          borderColor: "#3E60DC",
          width: 10
        }
      ]
      // queryAllInfo()
    })
    .catch((e: any) => {
      console.log(e);
    });
}
// 获取警情范围 周边信息
function queryAllInfo() {
  // 获取车辆
  queryClGpsFunc()
  // 获取人员
  queryRyGpsFunc()
  // 获取取水码头
  queryQsmtFunc()
  // 获取人工水源
  queryRgsyFunc()
  // 获取天然水源
  queryTrsyFunc()
  // 获取消火栓
  queryXhsFunc()
  // 获取队站
  queryJcXfjgFwInfoFunc()
}

// 获取车辆
function queryClGpsFunc() {
  queryClGps({ ajxxId: 202205250525, cxfw: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取人员
function queryRyGpsFunc() {
  queryRyGps({ ajxxId: 202205250525, bj: 5000, zhId: openid }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取取水码头
function queryQsmtFunc() {
  queryQsmt({ wd: latitude.value, jd: longitude.value, xcfw: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取人工水源
function queryRgsyFunc() {
  queryRgsy({ wd: latitude.value, jd: longitude.value, xcfw: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取天然水源
function queryTrsyFunc() {
  queryTrsy({ wd: latitude.value, jd: longitude.value, xcfw: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取消火栓
function queryXhsFunc() {
  queryXhs({ wd: latitude.value, jd: longitude.value, xcfw: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

// 获取队站
function queryJcXfjgFwInfoFunc() {
  queryJcXfjgFwInfo({ wd: latitude.value, jd: longitude.value, bj: 5000 }).then((res: any) => {
    if (res.result.resultCode == "000000") {
      markers.value = setMarkers(res)
    }
  })
    .catch((e: any) => {
      console.log(e);
    });
}

let a = 0
// 数组塞进markers
function setMarkers(res: any) {
  a = a + 1
  return [
    ...markers.value,
    ...res.data && res.data.map((item: any, index: any) => {
      return {
        id: item.location.lat,
        latitude: item.location.lat,
        longitude: item.location.lon,
        width: 40,
        height: 40,
        iconPath: item.tblj,
      }
    }) || []
  ]

}

const isFavorite = ref<boolean>(false);
const punchCompleteFlag = ref<boolean>(false)
type MarkerType = {
  id: number;
  latitude: number;
  longitude: number;
  iconPath: string;
  callout: object;
  width: number;
  height: number;
};

const markers = ref<Array<MarkerType>>([
  {
    id: 1,
    latitude: 0,
    longitude: 0,
    width: 40,
    height: 40,
    iconPath: "../../static/location.png",
    callout: {
      content: "终点",
      color: "#ff0000",
      fontSize: 14,
      borderWidth: 2,
      borderRadius: 10,
      borderColor: "#000000",
      bgColor: "#ffffff",
      padding: 5,
      display: "ALWAYS",
      textAlign: "center",
    },
  },
]);

/**
 * 打开警情详情页面
 */
function viewAlarmDetail() {
  viewAlertDetailFlag.value = false
  queryGroupList({ ajxxid: jqId.value, qzlx: '0207' }).then((res: any) => {
    console.log('获取当前警情id 的群组信息', res);
  }).catch((e: any) => {
    console.log(e);
  })

}
/**
 * 返回到上一页面
 */
function returnBackTo() {
  console.log("返回上一层");
  uni.navigateBack({});
}
/**
 * 处理警情收藏 按钮点击事件
 */
function handleFavoriteClick() {
  isFavorite.value = !isFavorite.value;
  console.log("收藏状态", isFavorite.value);
  let sfjrsc = 0
  if (isFavorite.value) {
    // TODO 收藏状态
    sfjrsc = 1
  } else {
    // TODO 取消收藏
    sfjrsc = 0
  }
  insertCollectAlert({ jqId: jqId.value, sfjrsc, zhId: openid })
    .then((res: any) => {
      if (res.result.resultCode == "000000") {
        punchCompleteFlag.value = true
        setTimeout(() => {
          punchCompleteFlag.value = false
        }, 2000)
      }
    })
    .catch((e: any) => {
      console.log('收藏警情出错', e);
    });
}

function collectAlert(jqId: string) {
  let params = {
    ajxxId: jqId,
    zhid: openid
  }
  queryWhetherCollectAlert(params).then((res: any) => {
    console.log('当前账户人员是否收藏警情', res.data);
    if (res.result.resultCode === '000000') {
      isFavorite.value = res.data
    }
  }).catch((e: any) => {
    console.log('查询收藏警情出错', e);

  })
}

</script>

<style lang="less" module>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;

  .button_group {
    height: 10%;
    align-items: center;
    background: #ffffff;
  }

  .favorite {
    bottom: 11%;
    left: 30rpx;
    width: calc(100% - 60rpx);
    height: 76rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
    border-radius: 20rpx;

    .text {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      margin-left: 10rpx;
    }
  }

  .button {
    width: 40%;
    border-radius: 40rpx;
    color: #5678f4;
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    background: rgba(86, 120, 244, 0.1);

    &::after {
      border: 0;
    }
  }

  .button_detail {
    background-image: linear-gradient(to right, #4520ca, #c90842);
    height: 80rpx;
    width: 40%;
    color: #ffffff;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}
</style>
